<template>
	<view class="page" :class="getThemeClass">
		<unavbar :isback="true" title="" class="my-nav-ber-a-box mallunavbar"></unavbar>
		
		<view v-if="info.status == 4" class="image-container">
			<video :src="info.ai_video_url" id="myVideo"  :style="{width: '100%', height: info.ai_video_meta_info.height + 'rpx', backgroundColor: '#000000'}" autoplay></video>
		</view>
		
		<view v-if="queue_type==0 && loadingProgress>0" class="make-container">
			<view class="progress">
				<view class="progress-text">正在生成中<text>{{loadingProgress}}%</text></view>
				<view class="progress-bg"><view class="progress-bar" :style="'width: ' + loadingProgress + '%'"></view></view>
				
			</view>
			<view class="progress-un" v-if="isUndone">
				<view><u-icon name="close-circle" size="40" color="#ffffff"></u-icon></view>
				<view class="progress-text">已撤销</view>
				<view>积分已退还</view>
			</view>
		</view>
		
		<view v-if="queue_type==1" class="make-container">
			<view class="progress-un" >
				<view><u-icon name="clock" size="40" color="#ffffff"></u-icon></view>
				<view class="progress-text">视频预计将在</view>
				<view>02:10 生成</view>
			</view>
		</view>

		<view class="rili-content black-bg">

			<view class="flex1 justify-between align-center g1 u-m-b-30" >
				<view class="u-m-l-0 u-font-24 flex1 align-center  ">
					<view class="k1 u-m-b-20 u-font-28  u-m-b-30">创作信息</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>创作者</view>
						<view></view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>创作时间</view>
						<view>{{info.created_at}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>转换风格</view>
						<view>{{info.model_name}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>视频分辩率</view>
						<view>{{info.ai_video_meta_info.width}} x {{info.ai_video_meta_info.height}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>视频大小</view>
						<view>{{info.ai_video_meta_info.size}} MB</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>视频帧率</view>
						<view>{{info.ai_video_meta_info.frame_rate}} fps</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>视频时长</view>
						<view>{{info.ai_video_meta_info.duration}} 秒</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>	
	export default{
		data(){
			return{
				isUndone: false,
				isMake: false,
				queue_type: '',
				shareShow: false,
				active:1,
				id:'',
				info:{},
				note:{},
				limist:10,
				page :1,
				dataOne:[],
				QRcode: '',
				imageSrc: '',
				loadingProgress: 0,
				shareImg: '/static/images/share-bg.png',
				shareList:[
					{name: '微信好友', img: '/static/images/cc1.png'},
					{name: 'QQ好友', img: '/static/images/cc2.png'},
					{name: '复制参数', img: '/static/images/cc3.png'}
				],
				timer: null,
				initTime: 2000
			}
		},
		mounted() {
			if(this.isMake){
				this.startTimer();
			}
		},
		onLoad(data) {
			this.id = data.id ||''
			this.isMake = data.is_make
			this.queue_type = data.queue_type || ''
			this.loadData()
		},
		onReachBottom() {
			
		},
		methods:{
			tab(num){
				this.active = num
			},
			loadData(){
				this.$u.api.videodetail({
					id: this.id
				}).then(res=>{
					this.info = res.data
					// if(res.data.cover != ''){
					// 	this.imageSrc = res.data.picture_url
					// 	this.loadingProgress = 0
					// }
					// else{
					// 	this.loadingProgress = 0
					// }
				})
			},
			allCopy() {
				this.shareShow = true
			},
			copy(data){
				uni.setClipboardData({
					data
				})
			},
			uniShare() {
				this.shareShow = true
			},
			shareClick (index) {
				console.log(index)
				if(index == 0){
					
				}
				else if(index == 1){
					
				}
				else if(index == 2){
					this.txt(this.info.prompt)
				}
			},
			txt(data){
				uni.setClipboardData({
					data: data,
					success: function () {
						uni.showToast({
							title:"复制成功",
							icon:"none"
						})
					}
				});
				// this.imgShow = false
			},
			startTimer() {
				this.timer = setInterval(() => {					
					if(this.loadingProgress == 0){
						this.requestApi();
						this.loadingProgress += 1
					}
					else if (this.loadingProgress == 99){
						this.requestApi();
					}
					else{
						this.loadingProgress += 1
					}
					
				}, this.initTime);
			},
			unDone(){
				clearInterval(this.timer)
				this.isUndone = true
				// uni.showToast({
				// 	title:"已撤销,积分已退还",
				// 	icon:"none"
				// })
				
				// let self = this
				// this.$u.api.accelerate({
				// 	draw_id: this.id
				// }).then(res=>{
				// 	self.loadingProgress = 98;
					
					
				// })
				
			},
			toSecond(){
				uni.reLaunch({
					url: '/pages/tabbar/bazaar/bazaar-second?id=' + this.id
				})
			},
			requestApi() {
				if(this.id == ''){
					return false
				}
				const self = this;
				let ids = [];
				ids.push(self.id)
				this.$u.api.videocheck({
					ids: ids
				}).then(res=>{
					let info = res.data
					if(info.status == 4){
						self.loadingProgress = 0;
						console.log(info)
						self.info.ai_video_url = info.ai_video_url
						self.info.status = info.status
						clearInterval(self.timer);
					}
					else{
						// if(self.loadingProgress < 90){
						// 	// self.loadingProgress += 10;
						// }
					}
					
				})

			},
			accelerate() {
				let that = this
				this.$u.api.accelerate({
					draw_id: that.id
				}).then(res=>{
					// if(res.status == 'error'){
					// 	uni.showToast({
					// 		title:res.message,
					// 		icon:"none"
					// 	})
					// 	this.loadingProgress = 100;
					// }
						
					// else{
					// 	this.requestApi();
					// }
					// that.requestApi();
					uni.showToast({
						title:res.message,
						icon:"none"
					})
					
					
				})
				
				this.loadingProgress = 98;
				// that.requestApi();
			}
		}
	}
</script>

<style lang="scss">

	.k1{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,0.8);
		line-height: 33rpx;
	}
	.k2{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255,255,255,0.6);
		line-height: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #494949; 
	}
	.g1{
		background: #1e1e1e;
		border-radius: 20rpx;
		padding: 34rpx;
		box-sizing: border-box;
	}




	.rili-content{
		position: relative;
		z-index: 10;
		padding:30rpx 32rpx 20rpx 32rpx;
		border-radius: 66rpx;
		.rili-avatar{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.rili-line{
			height: 1rpx;
			margin: 40rpx 0 50rpx 0;
		}
		.rili-tag{
			display: inline-block;
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 16rpx;
			background: linear-gradient(90deg, #04D5A3 0%, #00E2E2 100%);
			border-radius: 20rpx 8rpx 20rpx 8rpx;
		}
		.rili-card{
			width: 308rpx;
			height: 132rpx;
			border-radius: 20rpx;
			padding-left: 40rpx;
		}
	}
	::v-deep .uni-scroll-view, .uni-scroll-view-content {
		background-color: #242424;
	}
	::v-deep .u-drawer__scroll-view {
		height: auto;
	}
	.black-bg {
		margin-bottom: 90rpx;
	}
	
	.image-container {
		min-height: 400rpx;
		position: relative;
		border-radius: 20rpx;
		background-color: #000000;
	}
	
	.make-container {
		min-height: 400rpx;
		position: relative;
		margin: 0 30rpx;
		border-radius: 20rpx;
		background-color: #1e1e1e;
		
		.progress {
			position: absolute;
			width: 100%;
			padding: 0 30%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.progress-text {
				text-align: center;
				text {
					padding-left: 10rpx;
					color: #caf45c;
				}
			}
			.progress-bg{
				background-color: #3e3e3e;
			}
			.progress-bar {
				margin-top: 20rpx;
				height: 10rpx;
				background-color: #caf45c;
				transition: width 0.3s ease-in-out;
			}
		}
		.progress-un {
			position: absolute;
			width: 100%;
			padding: 0 30%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
		}
	}

	
	.responsive-image {
	  width: 100%;
	  height: auto;
	}
</style>